/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="schema-page">
        <div class="schema__title">
            <div class="title-left">schema</div>
        </div>
        <div class="schema__content">
            <sf-table ref="table" :options="gridOptions" default-height="100%">
                <sf-table-column data-index="name">schema</sf-table-column>
                <sf-table-column data-index="type">类型</sf-table-column>
                <sf-table-column data-index="comment">描述</sf-table-column>
                <template slot="comment" slot-scope="{record}">
                    <sf-editor v-model="record.comment" :italic="false" :class="record.comment===''?'schema-content__editor':''" @hide="changeComment"/>
                </template>
            </sf-table>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Array,
            default: () => ([])
        },
        dataset: {
            type: String,
            default: ''
        },
        dataspace: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            gridOptions: {
                bufferView: true,
                data: [],
                selectionHide: true,
            }
        }
    },
    watch: {
        data: {
            handler() {
                this.$refs.table.loadData(this.data || [])
            },
            deep: true,
        }
    },
    mounted() {
    },
    methods: {
        async changeComment() {
            const params = {
                dataset: this.dataset,  // 数据集名称
                dataspace: this.dataspace,   // 数据空间名称
                tableName: "data_table",   // 存储schema的文件名，固定值
                tableSchema: {
                    columns: this.data
                }
            }
            const {success, msg} = await this.$ajax.put('/ai-datalake/api/v1/tables/schema', params)
            if (!success) {
                this.$showErr(msg);
                this.$emit('update')
                return;
            }
            
        }
    }
}
</script>

<style scoped lang="less">
.schema-page {
    height: 100%;
    
    .schema {
        &__title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .title-left {
                height: 24px;
                line-height: 24px;
                border-left: 6px solid #1770E6;
                padding-left: 8px;
                font-size: 16px;
                font-weight: 500;
                color: #000000;
            }
        }
        
        &__content {
            margin-top: 16px;
            height: calc(100% - 40px);
            .sfv-table {
                .sfv-table_body {
                    .sfv-table_row:hover {
                        .schema-content__editor {
                            display: inline-block;
                        }
                    }
                    .sfv-table_row-selected {
                        .schema-content__editor {
                            display: inline-block;
                        }
                    }
                    .schema-content__editor {
                        display: none;
                    }
                }
            }
        }
    }
}
</style>
